<template>
  <div ref="main" class="main">
    <el-row :gutter="20" style="margin:0;">
      <div class="top-main">
        <span class="fullScreenWraper">
          <svg-icon icon-class="quanping" class-name="quanping" class="svg-icon" @click="fullScreen" />
        </span>
        <div class="title">
          <span>不凡数据大屏</span>
        </div>
        <div class="time">
          {{ time }}
        </div>
      </div>
    </el-row>
    <el-row :gutter="20" style="margin:0;">
      <el-col :span="6" :offset="0">
        <div class="title">
          电商数据 <span>Shell Data</span>
        </div>
        <div class="left-data">
          <div class="left-title">
            销售量 <span class="num-unit">万元</span>
          </div>
          <div class="num-content">
            <span class="numDelay-style">
              <countTo
                :start-val="9188886"
                :end-val="12010284"
                :duration="3000"
              />
            </span>
          </div>
        </div>
        <div class="left-data">
          <div class="left-title">
            完成百分比
          </div>
          <div class="pro-wrapper">
            <div class="pro-main">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="88" />
            </div>
          </div>
        </div>
        <div class="title">
          热门搜索词 <span>Top Search</span>
          <Words class="words" />
        </div>
      </el-col>
      <el-col :span="12" :offset="0" style="padding:0;">
        <el-row :gutter="20" style="margin:0;">
          <el-col :span="24" :offset="0" style="padding:0;">
            <Order class="order" />
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin:0;">
          <el-col :span="12" :offset="0" style="padding:0;">
            <Map class="map" />
          </el-col>
          <el-col :span="12" :offset="0" style="padding:0;">
            <Pie class="pie" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0" style="padding:0;">
        <div class="title">
          统计数据 <span>Statistics Data</span>
        </div>
        <div class="statistics-content">
          <div class="statistics-item">
            <div class="left">
              <svg-icon icon-class="xinxi" class-name="xinxi" />
            </div>
            <div class="right">
              <div class="wrapper">
                <div class="value">
                  85.6
                </div>
                <div class="text">
                  订单总数 (万)
                </div>
              </div>
            </div>
          </div>
          <div class="statistics-item">
            <div class="left">
              <svg-icon icon-class="dengpao" class-name="dengpao" />
            </div>
            <div class="right">
              <div class="wrapper">
                <div class="value">
                  32.5
                </div>
                <div class="text">
                  销售总量 (万元)
                </div>
              </div>
            </div>
          </div>
          <div class="statistics-item">
            <div class="left">
              <svg-icon icon-class="shandian1" class-name="shandian1" />
            </div>
            <div class="right">
              <div class="wrapper">
                <div class="value">
                  92.6
                </div>
                <div class="text">
                  人均消费
                </div>
              </div>
            </div>
          </div>
          <div class="statistics-item">
            <div class="left">
              <svg-icon icon-class="shandian2" class-name="shandian2" />
            </div>
            <div class="right">
              <div class="wrapper">
                <div class="value">
                  45
                </div>
                <div class="text">
                  近十分钟新增订单数量
                </div>
              </div>
            </div>
          </div>
          <div class="title" style="margin: 20px 0px;">
            大额订单Top  <span>Supper Orders</span>
          </div>
          <el-table
            :data="list"
            border
            :cell-style="{ color: '#fff','border': 'none' }"
            :header-cell-style="{ color: '#fff','border': 'none' }"
            style="border: 1px solid #33416b;"
          >
            <el-table-column
              prop="time"
              label="时间"
            />
            <el-table-column
              prop="product"
              label="物品"
            />
            <el-table-column
              prop="count"
              label="数量"
            />
            <el-table-column
              prop="price"
              label="金额"
            />
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 动态粒子 -->
      <!-- <div class="bg-animate">
        <BgAnimate />
      </div> -->
    </el-row>

  </div>
</template>

<script>
import Order from './components/Order.vue'
import Pie from './components/Pie.vue'
import Words from './components/Words.vue'
import Map from './components/Map.vue'
// import BgAnimate from '@/components/bg/BgAnimate.vue'
import screenfull from 'screenfull'
import countTo from 'vue-count-to'

export default {
  components: { Order, Pie, Words, Map, countTo },
  data() {
    return {
      time: '',
      list: [
        {
          time: '12-22',
          product: '物品1',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品2',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品3',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品4',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品5',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品6',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品7',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品8',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品9',
          count: 93,
          price: 51099
        },
        {
          time: '12-22',
          product: '物品10',
          count: 93,
          price: 51099
        }
      ]
    }
  },
  created() {
    setInterval(() => {
      var date = new Date()
      // 年
      var year = date.getFullYear()
      // 月
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      // 日
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // 时
      var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // 分
      var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // 秒
      var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      this.time = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss
    }, 1000)
  },
  mounted() {

  },
  methods: {
    // 全屏
    fullScreen() {
      if (screenfull.isEnabled) {
        // 控制是否全屏的按钮
        screenfull.toggle(this.$refs.main)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  width: 100%;
    background-color: #0a1631;
}
.order{
  width: 732px;
  height: 400px;
}
.pie{
  width: 365px;
  height: 360px;
}
.words{
  width: 428px;
  height: 400px;
}
.map{
  width: 366px;
  height: 360px;
}
.title {
    font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 22px;
    color: #9aa8d4;
    font-weight: 400;
  }
  .title span {
    font-size: 20px;
    color: #404d69;
    font-weight: 400;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}
.left-data {
    margin: 20px 0;
}
.left-data .left-title {
    font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 16px;
    color: #9aa8d4;
}
.left-data .left-title .num-unit{
    float: right;
    font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 16px;
    color: #73aae5;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}
.left-data .num-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.left-data .num-content .numDelay-style {
    letter-spacing: 5px;
    font-size: 60px;
    font-weight: 700;
    color: #fff;
}
.pro-main {
    position: relative;
    margin: 20px auto;
    width: 100%;
    height: 50px;
}
.pro-main .num {
    font-family: Microsoft Yahei;
    position: absolute;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    width: 45px;
    text-align: center;
    margin-left: -30px;
    transition: all .4s ease;
}
.statistics-content {
    position: relative;
    width: 100%;
    height: 150px;
    margin-top: 20px;
}
.statistics-content .statistics-item {
    position: relative;
    float: left;
    width: 50%;
    height: 50%;
}
.statistics-content .statistics-item .left {
    position: relative;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 35%;
}
.statistics-content .statistics-item .right{
    position: relative;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 65%;
    padding-left: 15px;
}
.statistics-content .statistics-item .right .wrapper .value {
    font-family: Microsoft Yahei;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}
.statistics-content .statistics-item .right .wrapper .text {
    margin-top: 4px;
    font-family: Microsoft Yahei;
    font-size: 12px;
    color: #b0c2f9;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
}

.top-main {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100px;
}

.top-main .title {
    margin: 0 auto;
    background: url(../../assets/images/top.png);
    background-size: 100% 100%;
    background-position: 50%;
    width: 70%;
    height: 122px;
    text-align: center;
    line-height: 100px;
    font-size: 36px;
}

.top-main .title span {
    font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 36px;
    color: #fff;
    text-shadow: #fff 0 0 15px;
    font-weight: 700;
}

.top-main .time {
    position: absolute;
    right: 30px;
    top: 20px;
    margin-right: 20px;
    font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 20px;
    color: #fff;
    font-weight: 400;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.top-main .fullScreenWraper {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 25px;
    color: #9aa8d4;
}

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

// .bg-animate{
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     width: 100%;
//     height: 15%;
//   }
</style>
